<template>
	<footer>
		<div class="footer" @click="popover">
			<div class="email">
				<img :src="emailIcon" alt="Email:1766414942@qq.com" />
				<span>{{ email }}</span>
			</div>
			
			<div class="icon" v-for="item in Icon">
				<ul>
					<li><a href="javascript:;" @click="open" target="_blank"><img :src="item.Icon" :alt="item.alt" /></a></li>
				</ul>
			</div>
			
			<transition name="slide-fade">
				<div class="WX" v-if="wx">
					<span>扫码查看</span>
					<img :src="WX" alt="" />
					<icon type="cancel" :title="'关闭'"></icon>
				</div>
			</transition>
			
			<div class="copyRight">
				{{ copyRight }}
			</div>
		</div>
	</footer>
</template>

<script>
	import emailIcon from '../../assets/footer_icon_01.gif'
	import Icon1 from '../../assets/footer_icon_02.gif'
	import Icon2 from '../../assets/footer_icon_03.gif'
	import Icon3 from '../../assets/footer_icon_04.gif'
	import Icon4 from '../../assets/footer_icon_05.gif'
	import Icon5 from '../../assets/footer_icon_06.gif'
	import Wx from '../../assets/wx.png'
	import { Icon } from 'vux'

	export default {
		components : {
			Icon
		},
		data (){
			return {
				email : '176666666@qq.com',
				emailIcon : emailIcon,
				copyRight : '2016上海某某展览会 版权所有',
				WX : Wx,
				wx : false,
				Icon : [
					{
						Icon : Icon1,
						alt : 'QQ'
					},
					{
						Icon : Icon2,
						alt : 'WX'
					},
					{
						Icon : Icon3,
						alt : 'WB'
					},
					{
						Icon : Icon4,
						alt : 'KJ'
					},
					{
						Icon : Icon5,
						alt : 'BD'
					}
				]
			}
		},
		methods : {
			popover (ev){
				
				if(ev.target.alt == 'WX'){
					this.wx = !this.wx
				}else if(ev.target.className == 'footer' || ev.target.title == '关闭'){
					this.wx = false
				}
			},
			open (ev){
				if(ev.target.alt == 'QQ'){
					window.open ('http://connect.qq.com/widget/shareqq/index.html?url=http://192.168.1.219:8000%2Fb7c1b25bccf642b19e44fa3423f27962.html&desc=&title=2016%E4%B8%8A%E6%B5%B7%E7%BB%BF%E8%89%B2%E6%9C%89%E6%9C%BA%E9%A3%9F%E5%93%81%E5%B1%95%E8%A7%88%E4%BC%9A&summary=&pics=&flash=&site=case125720.wqdian.cn&style=201&width=32&height=32','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'WB'){
					window.open ('http://service.weibo.com/share/share.php?url=http://128.168.1.219:8000%2Fb7c1b25bccf642b19e44fa3423f27962.html%231498794656514-tsina-1-94246-7fcd9de935f1b466bc16020b8589ba03&title=2016%E4%B8%8A%E6%B5%B7%E7%BB%BF%E8%89%B2%E6%9C%89%E6%9C%BA%E9%A3%9F%E5%93%81%E5%B1%95%E8%A7%88%E4%BC%9A&appkey=1343713053&searchPic=true','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'KJ'){
					window.open ('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://128.168.1.219:8000%2Fb7c1b25bccf642b19e44fa3423f27962.html&showcount=1&desc=&summary=&title=2016%E4%B8%8A%E6%B5%B7%E7%BB%BF%E8%89%B2%E6%9C%89%E6%9C%BA%E9%A3%9F%E5%93%81%E5%B1%95%E8%A7%88%E4%BC%9A&site=case125720.wqdian.cn&pics=&style=203&width=98&height=22','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}else if(ev.target.alt == 'BD'){
					window.open ('http://tieba.baidu.com/f/commit/share/openShareApi?url=http://128.168.1.219:8000%2Fb7c1b25bccf642b19e44fa3423f27962.html%231498794656514-tieba-1-46225-6d226d6560945497a729482043094d8e&title=2016%E4%B8%8A%E6%B5%B7%E7%BB%BF%E8%89%B2%E6%9C%89%E6%9C%BA%E9%A3%9F%E5%93%81%E5%B1%95%E8%A7%88%E4%BC%9A&desc=&comment=','newwindow','height=500,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
				}
			}
		}
	}
</script>

<style>
.footer{
	border-top: 0.01rem solid #797979; background-color: #231b18; padding: 0.25rem 0.5rem; padding-bottom: 0.1rem; color: #fff; overflow: hidden; font-size: 0.12rem; 
}
.footer .email{
	margin-left: 0.15rem;
}
.footer .email span{
	font-size: 0.15rem; 
}
.footer .email img{
	width:0.3rem; height: 0.25rem; vertical-align: middle; margin-right: 0.04rem;
}
.footer .icon{
	margin-top: 0.2rem; margin-left: 0.04rem;
}
.footer .icon ul{
	margin-left: 0.01rem;
}
.footer .icon li{
	float: left; list-style: none; margin-left: 0.07rem;
}
.footer .icon img{
	width: 0.35rem; height: 0.35rem; vertical-align: middle;
}
.footer .copyRight{
	clear: both; text-align: center; margin-top: 0.8rem;
}
.footer .WX{
	padding: 0.17rem; border-radius: 0.06rem; padding-top: 0.35rem; position: fixed; z-index: 99; background:#fff; top: 15%; left: 17%; -webkit-box-shadow: 0.01rem -0.01rem 0.01rem 0.03rem rgba(12,22,15,0.4);box-shadow: 0.01rem -0.01rem 0.01rem 0.03rem rgba(12,22,15,0.4);
}
.footer .WX img{
	width:1.8rem; height: 1.8rem;
}
.footer .WX .weui-icon-cancel{
	position: absolute; top: 0.05rem; right: 0.02rem; color: #000; font-size: 0.2rem !important;
}
.footer .WX span{
	color: #333; font-size: 0.12rem; position: absolute; top: 0.05rem; left: 0.05rem; font-weight: bold;
}
</style>